import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

// 虚拟数据
const mockGameData = {
  title: "王者荣耀全能王",
  cover: "https://picsum.photos/80/80?random=game",
  category: "MOBA",
  players: "2.1亿",
  rating: 4.8
};

const mockActivities = [
  {
    id: 1,
    title: "赢20g金条! PK吃鸡大逃杀",
    type: "battle",
    participants: 12580,
    prize: "20g金条"
  },
  {
    id: 2,
    title: "王者荣耀排位赛",
    type: "ranked",
    participants: 8920,
    prize: "限定皮肤"
  },
  {
    id: 3,
    title: "和平精英吃鸡挑战",
    type: "survival",
    participants: 15670,
    prize: "现金奖励"
  }
];

const mockFeatures = [
  { id: 1, name: "翻转", icon: "🔄", enabled: true, description: "翻转摄像头" },
  { id: 2, name: "魔法", icon: "✨", enabled: true, description: "魔法特效" },
  { id: 3, name: "美化", icon: "S", enabled: true, description: "美颜滤镜" },
  { id: 4, name: "分享", icon: "📤", enabled: true, description: "分享直播" },
  { id: 5, name: "赚钱", icon: "💰", enabled: true, description: "收益统计" },
  { id: 6, name: "活动区", icon: "🏆", enabled: true, description: "活动中心" },
  { id: 7, name: "预告", icon: "📅", enabled: false, description: "直播预告" },
  { id: 8, name: "上热门", icon: "🔥+", enabled: true, description: "推广功能" },
  { id: 9, name: "更多", icon: "⋯", enabled: true, description: "更多功能", hasNotification: true }
];

const Upload: React.FC = () => {
  const [isUploading, setIsUploading] = useState(false);
  const [error, setError] = useState('');
  const [uploadProgress, setUploadProgress] = useState(0);
  const [selectedActivity, setSelectedActivity] = useState(mockActivities[0]);
  const [showActivityModal, setShowActivityModal] = useState(false);
  const [showFeatureModal, setShowFeatureModal] = useState(false);
  const [selectedFeature, setSelectedFeature] = useState<any>(null);
  const navigate = useNavigate();
  const { user } = useAuth();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!user) {
      setError('请先登录');
      return;
    }

    setIsUploading(true);
    setError('');
    setUploadProgress(0);

    // 模拟上传进度
    const progressInterval = setInterval(() => {
      setUploadProgress(prev => {
        if (prev >= 90) {
          clearInterval(progressInterval);
          return 90;
        }
        return prev + 10;
      });
    }, 200);

    try {
      // 模拟上传成功
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      if (process.env.NODE_ENV === 'development') {
        console.log('视频上传成功');
      }
      setUploadProgress(100);
      setTimeout(() => {
        navigate('/');
      }, 1000);
    } catch (error: any) {
      setError(error.message || '上传失败，请重试');
    } finally {
      setIsUploading(false);
      setUploadProgress(0);
    }
  };

  const handleFeatureClick = (feature: any) => {
    setSelectedFeature(feature);
    setShowFeatureModal(true);
  };

  const handleActivityClick = () => {
    setShowActivityModal(true);
  };

  return (
    <div className="min-h-screen bg-blue-950">
      {/* 顶部状态栏 */}
      <div className="bg-blue-950 h-12 flex items-center justify-between px-4 text-white text-sm">
        <span>15:06</span>
        <div className="flex items-center space-x-1">
          <span>📶</span>
          <span>52%</span>
        </div>
      </div>

      {/* 顶部导航栏 */}
      <div className="bg-blue-950 border-b border-blue-800">
        <div className="flex items-center justify-between px-4 py-3">
          <button 
            onClick={() => navigate('/')}
            className="text-white text-xl hover:text-gray-300 transition-colors duration-200"
          >
            ✕
          </button>
          <div className="flex space-x-2 text-white text-sm">
            <button className="px-3 py-1 bg-blue-800 rounded hover:bg-blue-700 transition-colors duration-200">视频</button>
            <button className="px-3 py-1 rounded hover:bg-blue-800 transition-colors duration-200">手游</button>
            <button className="px-3 py-1 rounded hover:bg-blue-800 transition-colors duration-200">聊天室</button>
            <button className="px-3 py-1 rounded hover:bg-blue-800 transition-colors duration-200">弹幕</button>
            <button className="px-3 py-1 rounded hover:bg-blue-800 transition-colors duration-200">电台</button>
            <button className="px-3 py-1 rounded hover:bg-blue-800 transition-colors duration-200">ℹ️</button>
          </div>
        </div>
      </div>

      {/* 内容选择区域 */}
      <div className="p-4">
        <div className="bg-gray-900 rounded-lg p-4 mb-4">
          <div className="flex items-center space-x-4">
            <div className="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center overflow-hidden">
              <img 
                src={mockGameData.cover} 
                alt={mockGameData.title}
                className="w-full h-full object-cover"
              />
            </div>
            <div className="flex-1">
              <h3 className="text-white text-lg font-medium">{mockGameData.title}</h3>
              <div className="flex items-center space-x-2 mt-1">
                <span className="text-gray-400 text-xs">{mockGameData.category}</span>
                <span className="text-gray-400 text-xs">•</span>
                <span className="text-gray-400 text-xs">{mockGameData.players}玩家</span>
                <span className="text-gray-400 text-xs">•</span>
                <span className="text-yellow-400 text-xs">★ {mockGameData.rating}</span>
              </div>
              <button className="mt-2 bg-red-500 text-white text-xs px-3 py-1 rounded hover:bg-red-600 transition-colors duration-200">
                更新封面
              </button>
            </div>
          </div>
        </div>
        
        <p className="text-gray-300 text-sm mb-4 flex items-center">
          📋 选择直播内容，获得精准流量
        </p>
        
        <div 
          className="bg-blue-700 rounded-lg p-4 mb-6 cursor-pointer hover:bg-blue-600 transition-colors duration-200"
          onClick={handleActivityClick}
        >
          <div className="flex items-center justify-between">
            <div className="flex-1">
              <span className="text-white font-medium">{selectedActivity.title}</span>
              <div className="flex items-center space-x-2 mt-1">
                <span className="text-blue-200 text-xs">{selectedActivity.participants.toLocaleString()}人参与</span>
                <span className="text-yellow-300 text-xs">奖品: {selectedActivity.prize}</span>
              </div>
            </div>
            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
              <span className="text-white text-xs">▶</span>
            </div>
          </div>
        </div>
      </div>

      {/* 功能图标网格 */}
      <div className="px-4 mb-6">
        <div className="grid grid-cols-5 gap-4 mb-4">
          {mockFeatures.slice(0, 5).map((feature) => (
            <button 
              key={feature.id}
              onClick={() => handleFeatureClick(feature)}
              className="flex flex-col items-center space-y-2 hover:scale-110 transition-transform duration-200"
            >
              <div className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-200 ${
                feature.enabled ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-900 opacity-50'
              }`}>
                <span className="text-white text-lg">{feature.icon}</span>
              </div>
              <span className="text-white text-xs">{feature.name}</span>
            </button>
          ))}
        </div>
        
        <div className="grid grid-cols-5 gap-4">
          {mockFeatures.slice(5).map((feature) => (
            <button 
              key={feature.id}
              onClick={() => handleFeatureClick(feature)}
              className="flex flex-col items-center space-y-2 hover:scale-110 transition-transform duration-200"
            >
              <div className={`w-12 h-12 rounded-full flex items-center justify-center relative transition-colors duration-200 ${
                feature.enabled ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-900 opacity-50'
              }`}>
                <span className="text-white text-lg">{feature.icon}</span>
                {feature.hasNotification && (
                  <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></div>
                )}
              </div>
              <span className="text-white text-xs">{feature.name}</span>
            </button>
          ))}
        </div>
      </div>

      {/* 主要操作按钮 */}
      <div className="px-4 mb-20">
        <button 
          onClick={handleSubmit}
          disabled={isUploading}
          className="w-full bg-gradient-to-r from-red-500 to-orange-500 text-white py-4 rounded-lg font-bold text-lg disabled:opacity-50 hover:from-red-600 hover:to-orange-600 transition-all duration-200 shadow-lg"
        >
          {isUploading ? `发布中... ${uploadProgress}%` : '开始视频直播'}
        </button>
      </div>

      {/* 底部导航栏 */}
      <div className="fixed bottom-0 left-0 right-0 bg-black border-t border-gray-800">
        <div className="flex items-center justify-around py-3">
          <button 
            onClick={() => navigate('/')}
            className="flex flex-col items-center space-y-1 text-gray-400 hover:text-red-500 transition-colors duration-200"
          >
            <span className="text-xs">🏠</span>
            <span className="text-xs">首页</span>
          </button>
          <button 
            onClick={() => navigate('/following')}
            className="flex flex-col items-center space-y-1 text-gray-400 hover:text-red-500 transition-colors duration-200"
          >
            <span className="text-xs">✓</span>
            <span className="text-xs">关注</span>
          </button>
          <button 
            onClick={() => navigate('/upload')}
            className="flex flex-col items-center space-y-1"
          >
            <div className="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center hover:bg-pink-600 transition-colors duration-200">
              <span className="text-white text-xl">+</span>
            </div>
            <span className="text-xs text-gray-400">发布</span>
          </button>
          <button 
            onClick={() => navigate('/messages')}
            className="flex flex-col items-center space-y-1 text-gray-400 hover:text-red-500 transition-colors duration-200"
          >
            <span className="text-xs">💬</span>
            <span className="text-xs">消息</span>
          </button>
          <button 
            onClick={() => navigate('/profile')}
            className="flex flex-col items-center space-y-1 text-gray-400 hover:text-red-500 transition-colors duration-200"
          >
            <span className="text-xs">👤</span>
            <span className="text-xs">我的</span>
          </button>
        </div>
      </div>

      {/* 功能详情模态框 */}
      {showFeatureModal && selectedFeature && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
          <div className="bg-gray-900 rounded-lg p-6 max-w-sm w-full mx-4">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-white text-lg font-bold">{selectedFeature.name}</h3>
              <button 
                onClick={() => setShowFeatureModal(false)}
                className="text-gray-400 hover:text-white"
              >
                ✕
              </button>
            </div>
            <div className="text-center mb-4">
              <div className="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3">
                <span className="text-white text-2xl">{selectedFeature.icon}</span>
              </div>
              <p className="text-gray-300 text-sm">{selectedFeature.description}</p>
            </div>
            <div className="flex space-x-3">
              <button 
                onClick={() => setShowFeatureModal(false)}
                className="flex-1 bg-gray-700 text-white py-2 rounded hover:bg-gray-600 transition-colors duration-200"
              >
                取消
              </button>
              <button 
                onClick={() => {
                  alert(`${selectedFeature.name}功能已启用！`);
                  setShowFeatureModal(false);
                }}
                className="flex-1 bg-red-500 text-white py-2 rounded hover:bg-red-600 transition-colors duration-200"
              >
                启用
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 活动选择模态框 */}
      {showActivityModal && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
          <div className="bg-gray-900 rounded-lg p-6 max-w-md w-full mx-4 max-h-96 overflow-y-auto">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-white text-lg font-bold">选择活动</h3>
              <button 
                onClick={() => setShowActivityModal(false)}
                className="text-gray-400 hover:text-white"
              >
                ✕
              </button>
            </div>
            <div className="space-y-3">
              {mockActivities.map((activity) => (
                <button
                  key={activity.id}
                  onClick={() => {
                    setSelectedActivity(activity);
                    setShowActivityModal(false);
                  }}
                  className="w-full bg-gray-800 rounded-lg p-4 text-left hover:bg-gray-700 transition-colors duration-200"
                >
                  <div className="text-white font-medium">{activity.title}</div>
                  <div className="flex items-center justify-between mt-2">
                    <span className="text-blue-300 text-sm">{activity.participants.toLocaleString()}人参与</span>
                    <span className="text-yellow-300 text-sm">{activity.prize}</span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 错误提示 */}
      {error && (
        <div className="fixed top-20 left-4 right-4 bg-red-600 text-white px-4 py-3 rounded-lg z-40">
          {error}
        </div>
      )}

      {/* 上传进度提示 */}
      {isUploading && (
        <div className="fixed top-20 left-4 right-4 bg-blue-600 text-white px-4 py-3 rounded-lg z-40">
          <div className="flex items-center justify-between">
            <span>上传进度: {uploadProgress}%</span>
            <div className="w-24 bg-blue-700 rounded-full h-2">
              <div 
                className="bg-blue-300 h-2 rounded-full transition-all duration-300"
                style={{ width: `${uploadProgress}%` }}
              ></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Upload; 